import Layout from '../../lib/components/Layout';
export default Layout;

# flip

The `flip{:.function}` middleware changes the placement of the
floating element to the opposite one by default in order to keep
it in view.

<div className="flex flex-col gap-4">
  <Chrome
    label="Scroll the container"
    center
    scrollable
    className="h-96"
  >
    <Floating middleware={[{name: 'flip'}]}>
      <div className="grid place-items-center w-32 h-32 border-2 border-gray-1000 border-dashed" />
    </Floating>
  </Chrome>
</div>

It also has the ability to flip to _any_ placement, not just the
opposite one.

## Usage

```js
import {computePosition, flip} from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});
```

> This cannot be used with `autoPlacement{:.function}`.

## Options

These are the options you can pass to `flip(){:js}`. Each comment
specifies the default value.

```ts
type Options = DetectOverflowOptions & {
  mainAxis: boolean; // true
  crossAxis: boolean; // true
  fallbackPlacements: Array<Placement>; // [oppositePlacement]
  fallbackStrategy: 'bestFit' | 'initialPlacement'; // 'bestFit'
  flipAlignment: boolean; // true
};
```

### mainAxis

This is the main axis in which overflow is checked to perform a
flip.

- `y`-axis for `'top'{:js}` and `'bottom'{:js}` placements
- `x`-axis for `'left'{:js}` and `'right'{:js}` placements

```js
flip({mainAxis: false});
```

### crossAxis

This is the cross axis in which overflow is checked to perform a
flip, the opposite axis of `mainAxis{:.objectKey}`.

```js
flip({crossAxis: false});
```

### fallbackPlacements

This describes the array of placements to try if the preferred
`placement{:.objectKey}` doesn't fully fit on the axes in which
overflow is checked (both by default).

```js
flip({
  fallbackPlacements: ['right', 'bottom'],
});
```

If the `placement{:.objectKey}` in `computePosition(){:js}` is
set to `'top'{:js}`, but that doesn't fit, then `'right'{:js}`
will be used instead. If `'right'{:js}` also doesn't fit, then
`'bottom'{:js}` will be used. If none of these fit, then the
best-fitting placement will be used.

### fallbackStrategy

When no placements fit, then you'll want to decide what happens.
`'bestFit'{:js}` will use the placement which fits best on the
checked axes. `'initialPlacement'{:js}` will use the initial
`placement{:.objectKey}` specified.

```js
flip({
  fallbackStrategy: 'initialPlacement',
});
```

### flipAlignment

When an alignment is specified, e.g. `'top-start'{:js}` instead
of just `'top'{:js}`, this will flip to `'top-end'{:js}` if
`start` doesn't fit.

```js
flip({flipAlignment: false});
```

When using this with the `shift{:.function}` middleware, ensure
`flip{:.function}` is placed **before** `shift{:.function}` in
your middleware array. This ensures the
`flipAlignment{:.objectKey}` logic can act before shift's does.

### ...detectOverflowOptions

All of [detectOverflow](/docs/detectOverflow#options)'s options
can be passed. For instance:

```js
flip({padding: 5}); // 0 by default
```
